﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>综合数据监控平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <!-- pnotify -->
    <link rel="stylesheet" href="assets/js/pnotify/pnotify.custom.css">
    <!-- myCss -->
    <link rel="stylesheet" href="assets/css/myCss.css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="entypo-menu"></span>
                </button>
                <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                    <span class="entypo-list-add"></span>
                </button>




                <div id="logo-mobile" class="visible-xs">
                    <h1>睿科电子<span>v1.0</span></h1>
                </div>

            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    
                    
                    <!-- 帮助 -->
                    <li><a href="#"><i data-toggle="tooltip" data-placement="bottom" title="Help" style="font-size:20px;" class="icon-help tooltitle"></i></a>
                    </li>

                </ul>
                <!-- 时间天气框 -->
                <div id="nt-title-container" class="navbar-left running-text visible-lg">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>

                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="meridiem"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                    </ul>
                    <div style="height: 18px; overflow: hidden; padding-left: 40px;">
                        <i class="fa fa-tag"></i>
                        所在城市：
                        &#160;&#160;西安&#160;
                    </div>
                </div>

                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" class="admin-pic img-circle" src="assets/img/user.jpg">你好, <span class="username">未知用户</span> <b class="caret"></b>
                        </a>
                        <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                            <!-- <li>
                                <a href="profile.html">
                                    <span class="entypo-user"></span>&#160;&#160;头像</a>
                            </li>
                            <li>
                                <a href="">
                                    <span class="entypo-vcard"></span>&#160;&#160;设置</a>
                            </li> -->
                            <li>
                                <a href="lock-screen.html">
                                    <span class="entypo-lock"></span>&#160;&#160; 屏幕锁定</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="login.html?b=1">
                                    <span class="entypo-logout"></span>&#160;&#160; 退出登录</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-gear"></span>&#160;&#160;主题</a>
                        <ul role="menu" class="dropdown-setting dropdown-menu">

                            <li class="theme-bg">
                                <div id="button-bg"></div>
                                <div id="button-bg2"></div>
                                <div id="button-bg3"></div>
                                <div id="button-bg5"></div>
                                <div id="button-bg6"></div>
                                <div id="button-bg7"></div>
                                <div id="button-bg8"></div>
                                <div id="button-bg9"></div>
                                <div id="button-bg10"></div>
                                <div id="button-bg11"></div>
                                <div id="button-bg12"></div>
                                <div id="button-bg13"></div>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <div id="skin-select">
        <div id="logo">
            <img src="assets/img/logo.png" alt="大连睿科电子有限公司">
        </div>

        <a id="toggle">
            <span class="entypo-menu"></span>
        </a>


        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest">
                        <li>
                            <a class="tooltip-tip ajax-load" href="index.html" title="首页">
                                <i class="icon-home"></i>
                                <span>首页</span>

                            </a>
                        </li>
                    </ul>

                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="widget-menu"></span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="realtime-data.html" title="实时数据">
                                <i class="icon-document-edit"></i>
                                <span>实时数据</span>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="chart-data.html" title="数据曲线">
                                <i class="icon-graph-line"></i>
                                <span>数据曲线</span>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="history-data.html" title="历史数据">
                                <i class="icon-document"></i>
                                <span>历史数据</span>

                            </a>
                        </li>
                    </ul>

                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="design-kit"></span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="device-manage.html" title="设备管理">
                                <i class="icon-view-thumb"></i>
                                <span>设备管理</span>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="user-manage.html" title="用户管理">
                                <i class="icon-user"></i>
                                <span>用户管理</span>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="login-record.html" title="登录日志">
                                <i class="icon-user-group"></i>
                                <span>登录日志</span>

                            </a>
                        </li>
                        <!-- <li>
                            <a class="tooltip-tip ajax-load" href="SIMinfo-manage.html" title="SIM卡信息管理">
                                <i class="icon-message"></i>
                                <span>SIM卡信息管理</span>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="#" title="系统设置">
                                <i class="icon-gear"></i>
                                <span>系统设置</span>

                            </a>
                        </li> -->
                    </ul>

                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="component"></span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip" href="warning-handle.html" title="报警处理">
                                <i class="icon-warning"></i>
                                <span>报警处理</span>
                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip" href="warning-config.html" title="报警设置">
                                <i class="icon-attachment"></i>
                                <span>报警设置</span>
                            </a>
                        </li>

                    </ul>


                </div>
            </div>
        </div>
    </div>
    <!-- END OF SIDE MENU -->



    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">





            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <i class="icon-document-edit"></i> 
                            <span>实时数据
                            </span>
                        </h2>

                    </div>

                    <div class="col-sm-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">

                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <span class="tittle-alert entypo-info-circled"></span>
                                欢迎回来,&nbsp;
                                <strong class="username">未知用户!</strong>&nbsp;&nbsp;您正在使用 大连睿科 综合数据监控平台
                            </div>


                        </div>

                    </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#">终端监控</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="history-data.html">历史数据</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="history-data-detail.html">数据列表</a>
            </ul>

            <!-- END OF BREADCRUMB -->



            <div class="content-wrap">
                <div class="row">


                    <div class="col-sm-12">

                        <div class="nest" id="FootableClose">
                            <div class="title-alt">
                                <h6>
                                    数据列表 [ <span id="_deviceId"></span> ]
                                </h6>

                            </div>

                            <div class="body-nest" id="Footable">
                                <table class="table table-bordered table-striped table-hover" id="item_table">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>采集时间</th>
                                            <th>压力</th>
                                            <th>温度</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 喵喵喵 -->
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="4">
                                                <nav id="pageBox" aria-label="Page navigation" class="pull-left"></nav>
                                                <input id="Button1" type="button" class="btn btn-success pull-right" style="margin:10px;" value="导出EXCEL"/>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                        </div>

                    </div>

                </div>
            </div>


            <!-- /END OF CONTENT -->
        </div>
    </div>
    <!--  END OF PAPER WRAP -->
    <nav role="navigation" class="navbar navbar-fixed-bottom" style="">
        <div class="container-fluid">
                <p class="pull-left" id="copyright">版权归 <a href="http://www.brjzbs.com/" title="西安天通物联网科技有限公司" target="_blank">西安天通物联网科技有限公司</a> 所有</p>
                
                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    
                    <li class="dropup">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i style="font-size:19px;" class="icon-warning tooltitle"></i>
                            <div class="noft-green" style="top:-8px; left:12px;" id="noft">0</div>
                        </a>
                        <ul role="menu" class="dropdown-menu">
                            <li>
                                <button id="notify" onclick="show_notify('未知','未知错误原因报警','2017-08-15');" class="btn btn-success btn-block">biu~</button>
                            </li>
                            <li class="divider"></li>
                            <li><a id="last-notify" onclick="$(this).trigger('pnotify.history-last');">查看上一条报警消息</a></li>
                            <li class="divider"></li>
                            <li><a id="all-notify" onclick="$(this).trigger('pnotify.history-all');">查看所有报警消息</a></li>
                            <!-- <li class="divider"></li>
                            <li><a id="close-notify">关闭所有报警消息</a></li> -->
                        </ul>
                    </li>
                </ul>

            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>


    <script type="text/javascript" src="assets/js/socket.io.js"></script>
    <script type="text/javascript" src="assets/js/requireData/history-data-detail.js"></script>
    <script type="text/javascript" src="assets/js/pagination/jquery.pagination.js?v=1"></script>
    <script type="text/javascript" src="assets/js/ioconnect.js"></script>
    <script language="javascript">   
        function GetRequest() {   
           var url = location.search; //获取url中"?"符后的字串   
           var theRequest = new Object();   
           if (url.indexOf("?") != -1) {   
              var str = url.substr(1);   
              strs = str.split("&");   
              for(var i = 0; i < strs.length; i ++) {   
                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
              }   
           }
           return theRequest;   
        }   

        var Request = new Object();
        Request = GetRequest();
        // console.log(Request);
        var deviceId = "",
        deviceId = Request['deviceId'],
        startTime = Request['startTime'],
        endTime = Request['endTime'];
        // console.log(startTime,endTime);
        $("#_deviceId").html(deviceId+"压力变送器");//根据url传送的deviceId 改标题的仪表名称

        //页面打开,首先显示历史数据的第一页数据

        function getHistoryDetail(pagesize,page,deviceid) {
            if (socket) {
                if(startTime == undefined && endTime == undefined){//如果从实时数据链接到此页面，没有时间限制，显示该仪表所有数据
                    var data = { itemsPerPage: pagesize, currentPage: page, deviceid: deviceId };
                }else{//从历史数据链接过来
                    var data = { itemsPerPage: pagesize, currentPage: page, timefrom:startTime, timeto:endTime, deviceid: deviceId };
                }
                console.log("select");
                socket.emit('data_log_select', data);
            }
        }
        var pageIndex_record = 1;
        socket.on('connect', function () {
            console.log("connect");
            getHistoryDetail(10, pageIndex_record, null);
        });
        socket.on('data_log', function (receivedata, itemcount) {
            console.log("receive data" + receivedata);
            set_json_data(receivedata,pageIndex_record);//处理数据并渲染到页面
            $('#pageBox').pagination({
                total: itemcount,
                current: pageIndex_record
            });

        });
        $('#pageBox').pagination({
            callback: function (pageIndex, pagination) {
                pageIndex_record = pageIndex;
                getHistoryDetail(10, pageIndex, null);
            }
        });
 
    </script>
    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    <!-- 报警弹框 -->
    <script type="text/javascript" src="assets/js/pnotify/pnotify.custom.min.js"></script>
    <script type="text/javascript" src="assets/js/page/warn_notify.js"></script>

</body>

</html>
